<template>
  <!-- ✅ 顶部栏加语言图标 -->
  <TopNavBar type="back" :title="_t18('login')">
    <template #right>
      <image-load
        :filePath="currentLang.imgUrl"
        class="lang-switch-icon"
        @click="$router.push('/language-selection')"
      />
    </template>
  </TopNavBar>

  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <div class="cyber-world" :key="reloadKey">
      <div class="login-method">
        <van-tabs
          v-model:active="active"
          type="card"
          title-inactive-color="#000"
        >
          <van-tab v-for="(item, index) in tabList" :key="index" :title="item.title">
            <div style="padding: 0 15px;">
              <component :is="currentComponent"></component>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </van-pull-refresh>
</template>

<script setup>
import { ref, computed } from 'vue'
import { _t18 } from '@/utils/public'
import AccountLogin from './components/sign-in/AccountLogin.vue'
import EmailLogin from './components/sign-in/EmailLogin.vue'
import MobileLogin from './components/sign-in/MobileLogin.vue'
import { useMainStore } from '@/store/index.js'
import { showToast } from 'vant'
import { useI18n } from 'vue-i18n'

const mainStore = useMainStore()
const active = ref(0)
const refreshing = ref(false)
const reloadKey = ref(Date.now())
const { t } = useI18n()

// ✅ 自动匹配当前语言对象（用于国旗图标）
const currentLang = computed(() =>
  mainStore.languageList.find((item) => item.dictValue === mainStore.language) || {}
)

// ✅ 下拉刷新逻辑
const onRefresh = async () => {
  refreshing.value = true
  try {
    await mainStore.getSettingConfig()
    showToast(t('withdraw_tab_success'))
    reloadKey.value = Date.now()
  } catch (err) {
    showToast(t('withdraw_tab_error'))
  } finally {
    setTimeout(() => {
      refreshing.value = false
    }, 500)
  }
}

// ✅ 登录方式列表
const tabList = computed(() => {
  const list = []
  const { ordinaryIsOpen, emailIsOpen, phoneIsOpen } = mainStore.getLoginMethodList

  if (ordinaryIsOpen || ['aams'].includes(__config._APP_ENV)) {
    list.push({
      id: 1,
      title: _t18('login_account', ['bitmake', 'aams']),
      componentName: AccountLogin
    })
  }

  if (emailIsOpen && !['aams'].includes(__config._APP_ENV)) {
    list.push({
      id: 2,
      title: _t18('login_email'),
      componentName: EmailLogin
    })
  }

  if (phoneIsOpen) {
    list.push({
      id: 3,
      title: _t18('login_mobile'),
      componentName: MobileLogin
    })
  }

  return ['coinsexpto'].includes(__config._APP_ENV) ? list.reverse() : list
})

// ✅ 当前显示组件
const currentComponent = computed(() => {
  return tabList.value[active.value]?.componentName || AccountLogin
})
</script>

<style lang="scss" scoped>
.cyber-world {
  min-height: 100vh;
  padding: 30px 10px 0;
  position: relative;
  overflow: hidden;
}
.login-method {
  ::v-deep(.van-tabs__nav--card) {
    margin: 0 !important;
    height: 40px !important;
    border-radius: 30px;
    overflow: hidden;
    padding: 4px 2px !important;
    border: none !important;
  }
  ::v-deep(.van-tab) {
    border: none;
    padding: 0 !important;
  }
  ::v-deep(.van-tab--active) {
    border-radius: 30px !important;
    background: #000 !important;
  }
  ::v-deep(.van-tabs__wrap) {
    height: 45px !important;
  }
  ::v-deep(.van-tab__text) {
    font-size: 14px !important;
  }
}

/* ✅ 新增：右上角语言图标样式 */
.lang-switch-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
</style>
